<template>
    <div>
      <van-nav-bar title="首页" left-text="返回" left-arrow>
        <template #right>
          <van-icon name="search" size="18" />
        </template>
      </van-nav-bar>
  
      <van-row>
        <van-col span="4" style="font-size: 16px;color: #666;">类别：</van-col>
        <van-col span="20">
          <van-button v-for="i, x in tlist" :key="x" @click="addType(i.id)">{{ i.name }}</van-button>
        </van-col>
  
      </van-row>
      <van-row>
        <van-col span="4">标签：</van-col>
        <van-col span="20">
          <van-button v-for="i, x in taglist" :key="x" @click="addlabel(i.id)">{{ i.name }}</van-button>
        </van-col>
      </van-row>
  
      <van-row>
        <van-col span="12">
          <van-button @click="sx">已上线</van-button>
          <van-button @click="jj">即将上线</van-button>
        </van-col>
        <van-col span="12" style="text-align:right;">
          <van-button @click="zx">最新</van-button>
          <van-button @click="zr">最热</van-button></van-col>
  
      </van-row>
  
      <van-card :price="i.price" desc="描述信息" :title="i.name" 
      :thumb="i.url"
        v-for="(i, index) in clist" :key="index"><template #footer>
          <van-button v-if="i.type==3" @click="buy(i.id)">加入购物车</van-button>
          <van-button size="mini" @click="xq(i.id)">详情</van-button>
        </template></van-card>
  
  
  
      <van-pagination v-model="currentPage" :total-items="total" :items-per-page="page_size" @change="getCourse" />
  
      <van-tabbar v-model="active">
        <van-tabbar-item icon="home-o">课程</van-tabbar-item>
        <van-tabbar-item icon="search">路径</van-tabbar-item>
        <van-tabbar-item icon="friends-o">讨论区</van-tabbar-item>
        <van-tabbar-item icon="setting-o">标签</van-tabbar-item>
      </van-tabbar>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        active: 0,
        currentPage: 1,
        total: 0,
        page_size: 2,
        clist: [],
        tlist: [],
        taglist: [],
        typeid: 0,
        tagid: 0,
        online: 0,
        orderbyid: 0
      }
    },
    methods: {
      xq(id) {
        this.$router.push("/detail/"+id)
      },
      addType(id) {
        this.typeid = id
        this.getCourse(1)
      },
      addlabel(id) {
        this.tagid = id
        this.getCourse(1)
      },
      sx() {
        this.online = 1
        this.getCourse(1)
      },
      jj() {
        this.online = 2
        this.getCourse(1)
      },
      zx() {
        this.orderbyid = 1
        this.getCourse(1)
      },
      zr() {
        this.orderbyid = 2
        this.getCourse(1)
      },
        getCourse(page) {
          console.log(this.typeid,this.tagid)
        this.axios.get("getHomeGourse?page=" + page + "&type=" + this.typeid + "&tagid=" + this.tagid + "&online=" + this.online + "&orderbyid=" + this.orderbyid).then(res => {
          this.clist = res.data.clist
          this.total = res.data.total
          this.page_size = res.data.page_size
          this.tlist = res.data.tlist
            this.taglist = res.data.taglist
          console.log(this.clist, this.total, this.page_size, this.taglist)
        })
      },
      buy(id) {
        this.axios.post('addcart', { "userid": localStorage.getItem("userid"), "goodsid": id }).then(res => {
  
        })
      }
    },
    mounted() {
      this.getCourse(1)
    },
  
  
  }
  </script>
  
  <style>
  
  </style>